<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import {
  pieOptions,
  barOptions,
  lineOptions,
  lineOptions4Order,
  lineOptions4Order30Day
} from './echarts-data-pay'
import { getPie } from '@/api/common/chart'
import { ref, reactive } from 'vue'
import {
  getUserAccessSourceApi,
  getOrderDayApi,
  getOrderWeekApi,
  getMonthlySalesApi
} from '@/api/dashboard/analysis/chartDataApi'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { Console } from 'console'

const { t } = useI18n()

const loading = ref(true)

const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption

// 用户来源
const getUserAccessSource = async () => {
  const res = await getUserAccessSourceApi().catch(() => {})
  if (res) {
    console.log('getUserAccessSource ', res.data)
    set(
      pieOptionsData,
      'legend.data',
      res.data.map((v) => t(v.name))
    )
    pieOptionsData!.series![0].data = res.data.map((v) => {
      return {
        name: t(v.name),
        value: v.value
      }
    })
  }
}

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 周活跃量
const getWeeklyUserActivity = async () => {
  const res = await getUserAccessSourceApi().catch(() => {})
  if (res) {
    set(
      barOptionsData,
      'xAxis.data',
      res.data.map((v) => t(v.name))
    )
    set(barOptionsData, 'series', [
      {
        name: t('analysis.activeQuantity'),
        data: res.data.map((v) => v.value),
        type: 'bar'
      }
    ])
  }
}

const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

// 每月销售总额
const getMonthlySales = async () => {
  const res = await getMonthlySalesApi().catch(() => {})
  if (res) {
    set(
      lineOptionsData,
      'xAxis.data',
      res.data.map((v) => t(v.name))
    )
    set(lineOptionsData, 'series', [
      {
        name: t('analysis.estimate'),
        smooth: true,
        type: 'line',
        data: res.data.map((v) => v.estimate),
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      },
      {
        name: t('analysis.actual'),
        smooth: true,
        type: 'line',
        itemStyle: {},
        data: res.data.map((v) => v.actual),
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      }
    ])
  }
}
const lineOptionsData4Order = reactive<EChartsOption>(lineOptions4Order) as EChartsOption

const getOrderWeek = async () => {
  const res = await getOrderWeekApi().catch(() => {})
  if (res) {
    set(lineOptionsData4Order, 'legend.data', res.data.legendData)
    set(lineOptionsData4Order, 'xAxis.data', res.data.xdata)
    let seriesItem: any = []
    console.log('项数据MAP ： ', res.data.seriesList)
    res.data.seriesList.forEach((val) => {
      seriesItem.push({
        name: val.name,
        smooth: true,
        type: 'line',
        itemStyle: {},
        data: val.data
      })
    })
    set(lineOptionsData4Order, 'series', seriesItem)
  }
}
const lineOptionsData4Order30Day = reactive<EChartsOption>(lineOptions4Order30Day) as EChartsOption

const getOrderDay = async () => {
  const res = await getOrderDayApi().catch(() => {})
  if (res) {
    set(lineOptionsData4Order30Day, 'legend.data', res.data.legendData)
    set(lineOptionsData4Order30Day, 'xAxis.data', res.data.xdata)
    let seriesItem: any = []
    console.log('项数据MAP ： ', res.data.seriesList)
    res.data.seriesList.forEach((val) => {
      seriesItem.push({
        name: val.name,
        smooth: true,
        type: 'line',
        itemStyle: {},
        data: val.data
      })
    })
    set(lineOptionsData4Order30Day, 'series', seriesItem)
  }
}

const getAllApi = async () => {
  await Promise.all([
    getUserAccessSource(),
    getWeeklyUserActivity(),
    getOrderWeek(),
    getOrderDay(),
    getMonthlySales()
  ])
  loading.value = false
}
getAllApi()
</script>

<template>
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="pieOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <Echart :options="lineOptionsData4Order" :height="450" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <Echart :options="lineOptionsData4Order30Day" :height="450" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <Echart :options="lineOptionsData" :height="350" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>
